<div class="import-blank">
  <ng-form name="importBlankProjectForm">

    <che-input-box ng-init="importBlankProjectController.registerForm(importBlankProjectForm)"
                   che-form="importBlankProjectForm"
                   che-name="name"
                   che-label-name="Name"
                   che-place-holder="Name of the project"
                   aria-label="Name of the project"
                   che-on-change="importBlankProjectController.onNameChanged($value)"
                   ng-model="importBlankProjectController.name"
                   ng-model-options="{allowInvalid: true}"
                   required
                   custom-validator="importBlankProjectController.isNameUnique($value)"
                   ng-maxlength="128"
                   ng-pattern="/^[A-Za-z0-9_\-\.]+$/">
      <div ng-message="customValidator">This project name is already used.</div>
      <div ng-message="pattern">The name should not contain special characters like space, dollar, etc.</div>
      <div ng-message="maxlength">The name has to be less than 128 characters long.</div>
      <div ng-message="md-maxlength">The name has to be less than 128 characters long.</div>
    </che-input-box>

    <che-input-box che-form="importBlankProjectForm"
                   che-name="description"
                   che-label-name="Description"
                   che-place-holder="Description of the project"
                   aria-label="Description of the project"
                   che-width="auto"
                   che-on-change="importBlankProjectController.onDescriptionChanged($value)"
                   ng-model="importBlankProjectController.description"
                   ng-model-options="{allowInvalid: true}"
                   ng-maxlength="256">
      <div ng-message="maxlength">The name has to be less than 256 characters long.</div>
      <div ng-message="md-maxlength">The name has to be less than 256 characters long.</div>
    </che-input-box>

  </ng-form>
</div>
